<template>
  <div>
    <el-menu id="navicol"
             :default-active="1"
             class="menu"
             @select="handleSelect"
             background-color="#222831"
             text-color="#FFFFFF"
             active-text-color="#00adb5">

      <el-submenu index="1">
        <template slot="title">
          <font-awesome-icon icon="eye" class="icon"/>
          <span class="item">防贫预警</span>
        </template>
        <el-menu-item index="1-1"><span>规则管理</span></el-menu-item>
        <el-menu-item index="1-2"><span>预警管理</span></el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <font-awesome-icon icon="book" class="icon"/>
          <span class="item">资质评估</span>
        </template>
        <el-menu-item index="2-1"><span>X</span></el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <font-awesome-icon icon="video" class="icon"/>
          <span class="item">画像分析</span>
        </template>
        <el-menu-item index="3-1">
          <span>个体画像</span>
        </el-menu-item>
        <el-menu-item index="3-2">
          <span>群体分析</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item index="4" class="item">
        <font-awesome-icon icon="lightbulb" class="icon"/>
        <span slot="title">标签管理</span>
      </el-menu-item>

      <el-menu-item index="5" class="item">
        <font-awesome-icon icon="database" class="icon"/>
        <span slot="title">服务管理</span>
      </el-menu-item>

      <el-menu-item index="6" class="item">
        <font-awesome-icon icon="home" class="icon"/>
        <span slot="title">用户设置</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
import Footer from "./Footer";
import Header from "./Header";

export default {
  name: "Body",
    data() {
    return {}
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({name: "sub" + key});

    },
  },
//生命周期 - 创建完成（访问当前this实例）
  created() {

  },
//生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
}
</script>

<style scoped>
.menu {
  width: 100%;
  left: 0;
}
.el-menu {
  border: none !important;
}

.item {
  font-size: 16px;
}

.icon {
  margin-right: 5px;
}
</style>
